<template>
  <zm-view ref="view" @auth-success="$refs.list.refresh()">
    <zm-list ref="list" :options="options" @query="handleQuery">
      <film-card v-for="item in list" :key="item.cardCode" :info="item" show-type="detail" custom-class="mx-30 mt-20" @click="onClickFilmCard"></film-card>
    </zm-list>
    <zm-footer background="#ffffff" safe-area-inset-bottom>
      <view class="flex">
        <view class="flex flex-1 justify-center my-40 font-30 font-700 border-right" @click="toView('pages/person/film-card-invalid/film-card-invalid')">不可用</view>
        <view class="flex flex-1 justify-center my-40 font-30 font-700 text-theme" @click="toView({ url: 'pages/person/film-card-add/film-card-add', login: true, mobile: true })">
          添加
        </view>
      </view>
    </zm-footer>
    <!-- #ifdef WEB -->
    <view v-if="homeDisable" class="home-btn" @click="handleBackHome">
      <zm-icon name="wap-home-o" size="38rpx" :color="useColor('theme')"></zm-icon>
    </view>
    <!-- #endif -->
  </zm-view>
</template>
<script>
import page from "@/mixins/page"
import { mapGetters } from "vuex"
import { useImage } from "@/utils/hook"
export default {
  mixins: [page],
  data() {
    return {
      list: [],
      routes: [],
      options: {
        emptyText: "暂无可用",
        loadTextColor: "#ccc",
        emptyImage: useImage("/zuimei-film-oss/1.0.0/empty/zwdyk-empty.png")
      }
    }
  },
  onShow() {
    this.routes = getCurrentPages()
    this.handleShowTips()
  },
  onLoad() {
    uni.setNavigationBarTitle({ title: this.cardName })
    this.handleOnEvent()
  },
  computed: {
    ...mapGetters(["cardName"]),
    homeDisable() {
      return this.routes.length == 1
    }
  },
  methods: {
    handleOnEvent() {
      uni.$off("refreshCardList")
      uni.$on("refreshCardList", () => {
        this.$nextTick(() => {
          this.$refs.list?.refresh()
        })
      })
    },
    // 显示绑定提示
    handleShowTips() {
      const tips = uni.$getCache("cardBindTips")
      if (tips) {
        uni.$toast({ type: "success", content: tips })
        uni.$setCache("cardBindTips", null)
        this.$refs.list?.refresh()
      }
    },
    onClickFilmCard(data) {
      this.toView({
        url: "pages/person/film-card-info/film-card-info",
        params: { cardId: data.id }
      })
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.card.cardList({ page, pageSize, validity: "1" })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>
<style scoped lang="scss">
.home-btn {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  bottom: 20vh;
  left: 28rpx;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
}
</style>
